<template>
  <div class="Play">
    <div
      :style="{ backgroundImage: 'url(' + nowMusic.picUrl + ')' }"
      class="PlayBg"
    ></div>
    <audio ref="audio" :src="url"></audio>

    <div class="mySongNews">
      <div class="logo"></div>
      <div class="disc w-100" @click="handlePlay">
        <div
          class="cover"
          ref="cover"
          :style="{
            background:
              'url(' +
              nowMusic.picUrl +
              '?imageView&thumbnail=360y360&quality=75&tostatic=0)'
          }"
        ></div>
        <!-- ?imageView&blur=40x20 -->
        <!--ref相当于id-->
        <div class="playBtn" v-if="!playStatus"></div>
      </div>
      <!-- <div>
        <div class="swap">
          <div class="mySongdisc">
            <div class="mySongTurn"></div>
            <div class="plybtn"></div>
          </div>
        </div>
      </div>
      <div>
        <div class="info">
          <div class="songTitle"></div>
          <div class="songWords">
            <div class="songScroll"></div>
          </div>
        </div>
        <div class="link"></div>
        <div class="guide"></div>
      </div>-->
    </div>
    <div class="bottomArea w-100">
      <div class="title w-80">{{ nowMusic.dsc }}-{{ nowMusic.authors }}</div>
      <div class="outerLyric w-100">
        <div class="innerLyric w-100 h-100" ref="lyric">
          <div class="lyric text-white w-100">{{ nowWord }}</div>
          <div class="lyric text-grey-2 w-100">{{ nextWord }}</div>
        </div>
      </div>
    </div>
    <!-- <div></div> -->
  </div>
</template>

<script>
import { getMusicUrl } from "@/api/song";
import { getLyric } from "@/api/lyric";
export default {
  name: "vueName",
  data() {
    return {
      nowMusic: [],
      url: "",
      playStatus: false,
      timer: null,
      r: 0,
      lyric: [],
      nowWord: "",
      nextWord: "",
      timer1: null,
      lyricDate: 0 //歌词计时时间写在播放函数外面,不写在里面,不能让每次点击都把计时时间清零
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  watch: {
    // nowWord(newV, oldV) {
    //   console.log("new:" + newV);
    //   console.log("old:" + oldV);
    //   this.nextWord = oldV;
    // }
  },
  created() {
    this.nowMusic = JSON.parse(sessionStorage.nowMusic); //json->js
    //   this.$router.push('/xxx') 路由跳转到'/xxx'
    //   this.$route 获取路由信息
    this.getMusicUrl();
    this.getLyric();

    window.addEventListener("keydown", e => {
      if (e.keyCode == 32) {
        this.handlePlay();
      }
    });
  },
  methods: {
    translateMSToSS(str) {
      let mySplit = str.split(":");
      let mm = Number(mySplit[0]);
      let s = Number(mySplit[1]);
      let ss = mm * 60 * 1000 + s * 1000;
      return ss;
    },
    handlePlay() {
      this.playStatus = !this.playStatus;
      if (this.playStatus) {
        this.$refs.audio.play();
        this.timer = setInterval(() => {
          this.$refs.cover.style.transform = //用了ref='cover' 就得用this.$refs.cover ;如果用id 就必须用doucument.getElementById('cover')
            "rotate(" + (this.r += 0.3) + "deg)"; //动作
          //this.$refs.cover.style.transition = "all 0.016s ease 0.016s"; //如果用动画transtion 就必须有动作: all所有的 linear动画的类型 16过渡时间16ms
        }, 16); //16ms转0.3deg,1秒转(1000/16ms)*0.3约=19deg 1000ms/60 就是60帧 1帧用了16.7ms左右 30-60帧动画是人眼可见的

        // let lyricDate = 0;
        this.timer1 = setInterval(() => {
          this.lyricDate += 10;
          this.lyric.forEach((item, index) => {
            // 00:01.123=>毫秒60*1000+123=6123   (6123/10=612.3).toFiexd()=612    00:01.120=>毫秒60*1000+120=6120    6120/10=612
            if (
              (this.translateMSToSS(item.time) / 10).toFixed() ==
              this.lyricDate / 10
            ) {
              this.nowWord = item.word;
              if (index != this.lyric.length - 1) {
                this.nextWord = this.lyric[index + 1].word;
              }
              // this.$refs.lyric.style.transform = "translateY(-100%)";
              // this.$refs.lyric.style.transition = "all 0.6s linear";
              // setTimeout(() => {
              //   this.$refs.lyric.style.transform = "translateY(100%)";
              //   this.$refs.lyric.style.transition = "none";
              //   setTimeout(() => {
              //     // this.$refs.lyric.style.display = "block";
              //     this.$refs.lyric.style.transform = "translateY(0)";
              //     this.$refs.lyric.style.transition = "all 0.6s linear";
              //   }, 600);
              // }, 600);
            }
          });
        }, 10);
      } else {
        this.$refs.audio.pause();
        clearInterval(this.timer);
        clearInterval(this.timer1);
      }
    },
    getLyric() {
      let id = this.$route.query.id;
      getLyric(id).then(res => {
        let lyric = res.data.lrc.lyric; //是个字符串
        let splitWord = lyric.split("\n"); //split('\n')\n进行切割 split将字符串转换成字符串数组
        splitWord.forEach((item, index) => {
          this.lyric[index] = {
            //slice截取 字符串 数组都可以操作
            time: item.split("]")[0].slice(1), //切割split将字符串数组转换成对象数组  slice方法是将数组对象截取(1)第二个开始从左到右截取(包含第二个)
            word: item.split("]")[1]
          };
        });
        this.nowWord = this.lyric[0].word;
        this.nextWord = this.lyric[1].word;
      });
    },
    getMusicUrl() {
      let id = this.$route.query.id;
      getMusicUrl(id).then(res => {
        this.url = res.data.data[0].url;
      });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  flex-shrink: 0;
}
.Play {
  width: 100%;
  height: 100vh;
  /* background-image: url("http://p4.music.126.net/-brZEmNcHgE0uHeougiFVg==/109951164833214629.jpg"); */

  z-index: 1;
  position: fixed;
  > div {
    z-index: 3;
    position: relative;
  }
  .PlayBg {
    width: 100vw;
    height: 100vh;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 1;
    filter: blur(4px);
    &::after {
      content: "";
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba($color: #1f212c, $alpha: 0.4);
    }
  }

  .mySongNews {
    padding-top: 70px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9;
    .logo {
      background: url("~assets/img/topbar.png") no-repeat 0 10.44%;
      background-size: 120px 108px;
      width: 79px;
      height: 17px;
      transform: scale(1.3); /*扩大1.3倍*/
      position: absolute;
      top: 17px;
      left: 26px;
      z-index: 3;
    }
    .disc {
      width: 296px;
      height: 296px;
      background: url("~assets/img/disc-ip6.png");
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      &::after {
        position: absolute;
        content: "";
        width: 96px;
        height: 137px;
        top: -70px;
        left: 133px;
        background-image: url("~assets/img/needle-ip6.png");
        background-size: contain;
      }
      .cover {
        /* background: url("~assets/img/testcover.jpg"); */
        background-size: contain !important;
        width: 184px;
        height: 184px;
        /* margin-left: 50%;
        margin-top: 50%;
        transform: translate(-50%,-50%);中心点(左上角)向左上角偏移自身宽高50%  scale(2)变大两倍 */
        border-radius: 50%;
      }
      .playBtn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        background: url("~assets/img/playBtn.png");
        background-size: contain;
      }
    }
    /* .swap {
      .mySongdisc {
        .mySongTurn {
        }
        .plybtn {
        }
        &::after {
        }
      }
      .info {
        .songTitle {
        }
        .songWords {
          .songScroll {
          }
        }
      }
      .link {
      }
      .guide {
      }
    } */
  }
  .bottomArea {
    position: relative;
    z-index: 9;
    .title {
      color: white;
      font-size: 18px;
      margin-left: 50%;
      transform: translateX(-50%);
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; /*overflow: hidden;white-space: nowrap;text-overflow: ellipsis  单行超出部分隐藏省略号*/
    }
    .outerLyric {
      height: 52px;
      overflow: hidden;
      padding-top: 14px;
      .innerLyric {
        .lyric {
          text-align: center;
          font-size: 16px;
        }
        .lyric:first-child {
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
